<template>
    <div class="vue-body">
        <!-- 搜索条件, 按钮 放在一行 -->
        <div class="btn-header">
            <!-- 搜索条件 -->
            <div>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入订单号" suffix-icon="el-icon-search"
                          v-model="params.order_number"></el-input>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入收件人" suffix-icon="el-icon-position"
                          v-model="params.consignee"></el-input>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入收件地址" suffix-icon="el-icon-message"
                          v-model="params.address"></el-input>
                <el-button type="primary" @click="load">搜索</el-button>
            </div>
            
            <!-- 操作按钮 -->
            <div class="btn-inner-div">
                <el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
                <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
                <el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
                <el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
            </div>
        </div>
        
        <!-- 列表查询 -->
        <el-table :data="cartList" border stripe :header-cell-class-name="headerBg" v-loading="loading">
            <el-table-column type="selection" label="全选" width="40" fixed="left"></el-table-column>
            <el-table-column prop="orderNumber" label="订单编号" width="200" align="center"></el-table-column>
            <el-table-column prop="userId" label="创建用户" width="100" align="center"></el-table-column>
            <el-table-column prop="totalPrice" label="订单总额" width="100" align="center"></el-table-column>
            <el-table-column prop="payWay" label="支付方式" width="100" align="center"></el-table-column>
            <el-table-column prop="payStatus" label="支付状态" width="100" align="center"></el-table-column>
            <el-table-column prop="consignee" label="收件人" width="100" align="center"></el-table-column>
            <el-table-column prop="address" label="收货地址" width="300" align="center"></el-table-column>
            <el-table-column prop="telephone" label="联系电话" width="120" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="orderShopDetail(scope.row)">商品 <i class="el-icon-s-goods"></i></el-button>
                    <el-button type="success" size="mini">编辑 <i class="el-icon-edit"></i></el-button>
                    <el-button type="danger" size="mini">移除 <i class="el-icon-remove-outline"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 分页查询 -->
        <div style="padding: 10px 0; text-align: left;">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="pageNum"
                 :page-sizes="[5, 10, 20, 50]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, ->,  jumper"
                 :total="total">
            </el-pagination>
        </div>
    
        <!-- 商品弹窗 -->
        <el-dialog
             :title="orderTitle"
             :visible.sync="orderVisible"
             width="40%">
            <div class="updateinfo">
                <div style="display: flex;">
                    <!-- 订单数据 -->
                    <el-table class="order-table" :data="orderShop" border stripe :header-cell-class-name="headerBg">
                        <el-table-column prop="bookName" label="图书信息" width="" align="center"
                                         style="padding: 0;">
                            <template slot-scope="scope">
                                <div class="book">
                                    <div class="book-content" style="width: 100%; display: flex; flex-wrap: wrap;">
                                        <div style="margin: 2px 0 2px 0; display: flex; border: 10px solid rgb(245 245 245);">
                                            <div class="img-box-order">
                                                <img :src="require('@/' + scope.row.bookImage)" class="imgbackground">
                                            </div>
                                            <div class="book-msg-order">
                                                <div style="height: 93%;">
                                                    <p class="sales" title="书籍简介">
                                                        早安，云。<br>
                                                        学问不会与愚昧人攀亲，忧愁不会与乐观人结缘，贪婪不会与正直人见面，勇敢不会与胆小人相遇。早安！
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bookName" label="图书名称" width="100" align="center"></el-table-column>
                        <el-table-column prop="price" label="单价" width="100" align="center"></el-table-column>
                        <el-table-column prop="total" label="数量" width="100" align="center"></el-table-column>
                        <el-table-column prop="countPrice" label="总额" width="100" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {page} from "@/api/order/order";

export default {
    name: "ToOrder",
    data() {
        return {
            cartList: [],
            params: {
                pay_status: '待支付', // 代付订单
            },
            pageNum: 1,
            pageSize: 10,
            loading: false,
            headerBg: 'headerBg',
            bookDes: '这个世界,不会偏爱任何一个不劳而获的人,当然也不会,辜负任何一个默默努力的人。 ' +
                 '爬在楼梯口，走廊上的藤蔓，映着明亮的月光，显得更加的翠绿。微风拂过，闪烁着银子一般的光。',
            total: 0, // 总数
            allSelect: false, // 全选
            selectedList: [], // 已选中数据
    
            orderVisible: false, // 订单关联商品弹窗
            orderShop: [], // 订单关联商品
            orderTitle: "订单商品列表",
        };
    },
    methods: {
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        load() {
            this.loading = true;
            page(this.pageNum, this.pageSize, this.params).then(res => {
                this.cartList = res.data.records
                this.total = res.data.total
                this.loading = false
            }).catch(() => this.loading = false)
        },
        
        // 处理选中数据
        handleSelectionChange(rows) {
        
        },
    
        // 订单详细商品数据
        orderShopDetail(order) {
            this.orderShop = order.items
            this.orderTitle = order.orderNumber + " 商品列表"
            this.orderVisible = true
        },
    },
    async mounted() {
        this.load()
    },
}
</script>

<style>

.order-table {
    max-height: 440px;
    overflow-y: scroll;
}

.align-footer {
    text-align: center;
}

.avatar-uploader {
    width: 80px;
    height: 80px;
    border: 1px #b6b9c1 solid;
}

.img-box {
    /*width: 200px;*/
    height: 80px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box .imgbackground {
    width: 80px;
    height: 80px;
}

.book {
    display: flex;
    margin: 0 -10px 0 -10px
    /*margin: 0 17.8% 0 17.8%;*/
    /*width: 33%;*/
}

.book-msg {
    width: 275px;
    text-align: left;
    margin: 0 9px 0 9px;
}

.book-msg p {
    margin-top: 10px;
    line-height: 1.5;
    font-size: smaller;
}

.book-msg h5 {
    font-size: smaller;
    margin-bottom: 5px;
}

.shop-car-btn {
    padding: 4px 14px;
}

.cart {
    margin: 0 17.8%;
}

/* 订单 */
.img-box-order .imgbackground {
    width: 80px;
    height: 80px;
    margin-bottom: -6px;
}

/* 滚动条 */
/* 隐藏滚动条 */
::-webkit-scrollbar {
    width: 1px !important;
}

/* 滚动条背景颜色 */
::-webkit-scrollbar {
    background-color: #999292 !important;
}

/* 图书信息的 p样式 */
.book-msg-order {
    width: 206px;
    text-align: left;
    margin: 0 9px 0 9px;
}

.book-msg-order p {
    margin-top: 3px;
    line-height: 1.5;
    font-size: smaller;
}

/* 支付二维码 */
.order-code-img {
    display: flex;
}

.pay-way {
    width: 40%;
    padding-left: 20px;
    text-align: left;
}

.pay-way li {
    margin-bottom: 15px;
}


/* 提示窗 */
div.tip-class {
    padding: 1.5rem !important;
    max-width: 70% !important;
    line-height: 20px;
    background-color: #7ab4cd !important;/*设置矩形框的背景颜色*/
}
/* [x-placement^='A'] A指的是el-tooltip标签中的placement的值，此处是bottom。猜测用于动态设置border-A-color。*/
.el-tooltip__popper[x-placement^='bottom'].tip-class .popper__arrow::after {
    border-bottom-color: #8e4549 !important; /*设置指向箭头的颜色*/
}

</style>
